/*
 * @Description:
 * @Author: Rfan
 * @Date: 2022-01-25 17:52:46
 * @LastEditTime: 2022-09-14 19:28:47
 */

import { useEffect } from 'react';
import { Button, Modal, Tabs } from 'antd';
import classNames from 'classnames/bind';
import { LevelLayoutContextProvider, useLevelLayoutContext } from './contexts/LevelLayoutContext';
import LevelTable from './components/LevelTable';
import FileLevelTable from './components/FileLevelTableWrap';
import type { ICommonDialog } from '@/interfaces/global';

import styles from './styles/fileLevelTable.module.scss';

const cx = classNames.bind(styles);

const { TabPane } = Tabs;

export interface LevelLayoutProps extends ICommonDialog {
  atId: number;
  title: string;
}

const LevelLayoutDialogCom = (props: LevelLayoutProps) => {
  console.log('UploadFloder', props.visible);
  const { visible, atId, title, onClose } = props;
  const { levelList, currentLevel, fetchATLevel, setCurrentData } = useLevelLayoutContext();
  useEffect(() => {
    if (visible) {
      //
    }
  }, [visible]);

  useEffect(() => {
    if (atId) {
      fetchATLevel(atId);
    }
  }, [atId]);

  /**
   * @description: 关闭弹窗
   */
  const onCancel = () => {
    onClose();
  };
  /**
   * @description: 计算所有可被渲染的tab
   */
  const tabList = (): [] => {
    if (levelList.length < 3) {
      return levelList.slice(0, -1);
    }
    return levelList.slice(0, -2);
  };

  const handleChangeTab = (val: any) => {
    console.log('change', val);
    setCurrentData(val);
  };

  return (
    <>
      <Modal
        title={title}
        visible={visible}
        className={cx('upload-floder-dialog')}
        width={600}
        maskClosable={false}
        destroyOnClose
        onCancel={onCancel}
        footer={[
          <Button key="close" onClick={onCancel}>
            关闭
          </Button>
        ]}
      >
        <Tabs activeKey={currentLevel} onChange={handleChangeTab}>
          {tabList().map((item: any, idx: number) => {
            return idx === tabList().length - 1 ? (
              <TabPane tab={item.levelName} key={item.level}>
                <FileLevelTable data={item} />
              </TabPane>
            ) : (
              <TabPane tab={item.levelName} key={item.level}>
                <LevelTable data={item} />
              </TabPane>
            );
          })}
        </Tabs>
      </Modal>
    </>
  );
};

const LevelLayoutDialog = (props: LevelLayoutProps) => (
  <LevelLayoutContextProvider>
    <LevelLayoutDialogCom {...props} />
  </LevelLayoutContextProvider>
);
export default LevelLayoutDialog;
